<template>
  <div class="login">
    <div class="navbar">登录</div>
    <van-form @submit="login" ref="myform">
      <van-field
        :rules="rules.phone"
        v-model="form.phone"
        name="用户名"
        placeholder="请输入手机号"
      >
        <template #left-icon>
          <i class="iconfont icon-shouji54 myicon"></i>
        </template>
      </van-field>
      <van-field
        :rules="rules.code"
        v-model="form.code"
        type="code"
        name="验证码"
        placeholder="请输入验证码"
      >
        <template #left-icon>
          <i class="iconfont icon-suo myicon"></i>
        </template>

        <template #button>
          <span @click="getcode" class="getcode" v-if="setTime === 10"
            >发送验证码</span
          >
          <span v-else>{{ setTime }}S后再重试</span>
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button block type="info" native-type="submit">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { loginApi, getCodeApi } from '../../Api/login'
import { localSet } from '../../utils/mylocal'
// import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      form: {
        phone: '',
        code: ''
      },
      setTime: 10,
      rules: {
        phone: [
          { required: true, message: '手机号不能为空', trigger: 'onBlur' },
          {
            pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            message: '手机号不合法',
            trigger: 'onBlur'
          }
        ],
        code: [
          { required: true, message: '验证码不能为空', trigger: 'onBlur' },
          {
            pattern: /\d{4}/,
            message: '验证码长度只能为4',
            trigger: 'onBlur'
          }
        ]
      }
    }
  },
  methods: {
    // ...mapMutations(['getUserInfo']),
    // 登录
    async login () {
      this.$toast({
        type: 'loading',
        message: '正在登录...'
      })
      const res = await loginApi({
        mobile: this.form.phone,
        code: this.form.code
      })
      // console.log(res)
      localSet('token', res.data.data)
      // localSet('applicationJson',res.data )
      const redirect = this.$route.query.redirect
      if (redirect) {
        this.$router.push(redirect)
      } else {
        this.$router.push('/my')
      }
    },

    // 获取验证码
    getcode () {
      // 验证手机号是否合法
      this.$refs.myform.validate(['phone']).then(async () => {
        this.$toast.loading('正在获取验证码')
        // 获取验证码倒计时
        const _time = setInterval(() => {
          this.setTime--
          if (this.setTime <= 0) {
            clearInterval(_time)
            this.setTime = 10
          }
        }, 1000)
        const res = await getCodeApi(this.form.phone)
        // 判断返回数据的正确性

        this.$toast.success(res.statusText)
        this.form.code = '246810'

        // this.$toast.fail(res.message)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.myicon {
  font-size: 16px;
}
.getcode {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  padding: 0 10px;
  border-radius: 15px;
  background-color: rgb(237, 237, 237);
}
.login {
  .navbar {
    width: 100%;
    background-color: #3e9df8;
    height: 46px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 46px;
  }
}
</style>
